<template>
	<main>
		<div class="container" v-loading="isLoading" element-loading-text="Loading..." style="height:466px;">
			<!-- 轮播 -->
			<el-carousel trigger="click" height="466px" v-if="SwiperImgList!.length>0">
				<el-carousel-item v-for="item in SwiperImgList" :key="item">
					<img :src="item">
				</el-carousel-item>
			</el-carousel>
		</div>
		<!-- 导航 -->
		<div class="nav-container">
			<div class="nav">
				<div style="margin-left:335px;">
					<router-link to="/home/resource/recommend" active-class="active">
						推荐
					</router-link>
					<router-link to="/home/resource/original" active-class="active">作品</router-link>
					<router-link to="/home/resource/course" active-class="active">教程</router-link>
					<router-link to="/home/resource/specialTopic" active-class="active">专题</router-link>
					<router-link to="/home/resource/information" active-class="active">动态</router-link>
					<router-link to="/home/resource/attention" active-class="active">关注</router-link>
				</div>
				<div class="hobbies" @click="showHobby">
					选择兴趣技能
				</div>
			</div>
		</div>
		<hobby/>
		<!-- loadMoreList列表 -->
		<div class="loadMoreList">
			<router-view></router-view>
		</div>
		<el-dialog v-model="userStore.showModel" title="温馨提示" width="30%" :before-close="handleClose">
			<div class="tip">临时用户请先<el-button @click="toLogin" size="small" type="primary" :icon="Key">登录</el-button></div>
		</el-dialog>
	</main>
</template>

<script setup lang="ts">
import {Key} from '@element-plus/icons-vue';
import { useUserInfoStore } from '@/stores/userInfo';
import {useRoute,useRouter} from 'vue-router'
import {
	onMounted,
	ref
} from "vue";
//资源api
import resourceApi from "@/api/resource/index";
import Hobby from "../../../Hobby/index.vue";
const route = useRoute();
const router = useRouter();
const userStore = useUserInfoStore()
//轮播图数据
const SwiperImgList = ref<string[]>([]);
let isLoading = ref(false);
const handleClose =()=>{
	userStore.showModel = false
}
//登录
const toLogin = () => {
	router.push('/login?redirect='+userStore.route || route.path)
	userStore.showModel = false
	userStore.route = ''
}
//展示hobby模态框
const showHobby = ()=>{
	userStore.hobby.isShow = true
}

//页面挂载时
onMounted(() => {
	//页面挂在获取轮播图
	isLoading.value = true;
	resourceApi.getSwiper()
		.then(res => {
			SwiperImgList.value = res.map(item => item.appAdvertiseUrl);
			isLoading.value = false;
		})
})
</script>

<style scoped>
/* 	main{
			margin-bottom: 60px;
		} */
/* 轮播图开始 */
.tip{
	text-align: center;
}
.container {
	width: 1200px;
	margin: 0px auto;
	padding-top: 20px;
}

.container img {
	height: 466px;
	border-radius: 5px;
}

.nav-container {
	position: sticky;
	background-color: #ffffff;
	top: 0px;
	z-index: 999;
}

/deep/ .el-carousel__button {
	width: 12px !important;
	height: 12px !important;
	margin: 0px 7px;
}

/deep/ .el-carousel__indicator--horizontal .el-carousel__button {
	width: 10px;
	height: 10px;
	background: transparent;
	border: 1px solid #ffffff;
	border-radius: 50%;
	opacity: 0.5;
}

/deep/ .el-carousel__indicator--horizontal.is-active .el-carousel__button {
	width: 10px;
	height: 10px;
	background: #ffffff;
	border-radius: 50%;
	opacity: 1;
}

/* 轮播图结束 */
/* nav开始 */
.nav .active {
	color: black;
	border-bottom: 3px solid #000;
}

.nav {
	height: 80px;
	display: flex;
	justify-content: space-between;
	line-height: 80px;
	width: 1200px;
	margin: 0px auto;
}

.nav a {
	display: inline-block;
	width: 40px;
	height: 61px;
	padding: 0 4px;
	margin: 0 20px;
	color: #7d8090;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
}

.nav a:hover {
	color: black;
}

.hobbies {
	margin-left: 0px;
	color: #7d8090;
	cursor: pointer;
}

.hobbies:before {
	content: "\e628";
	font-family: "iconfont";
}

/* nav结束 */
/* 列表开始 */
.loadMoreList {
	background-color: #f5f7f9;
}

/* 列表结束 */
</style>
